import { lazyReportBatch } from "../report";

//防止多次调用的标识
let isInitialized = false;
//点击事件的频率
let lastEventTime = 0;

const getElementPath = (el) => {
  const path = [];
  while (el && el !== document.body) {
    let selector = el.tagName.toLowerCase();
    if (el.id) selector += `#${el.id}`;
    if (el.className && typeof el.className === "string") {
      selector += `.${el.className
        .replace(/\s+/g, ".")
        .replace(/[^a-zA-Z0-9-_\.]/g, "")}`;
    }

    path.unshift(selector); // 从最外层开始记录
    el = el.parentElement;
  }
  return path.join(" > ");
};

const isSensitiveField = (el) => {
  return el.tagName === "INPUT" && el.type === "password";
};

export default function onClick() {
  //防止多次调用OnClick
  if (isInitialized) return;
  isInitialized = true;
  //mousedown：鼠标点击事件，适用于 PC 端
  // touchstart：手指触摸屏幕事件，适用于移动端
  ["mousedown", "touchstart"].forEach((eventType) => {
    window.addEventListener(
      eventType,
      function (e) {
        const target = e.target;
        //过滤掉无意义的点击
        if (
          target.tagName === "BODY" ||
          target.tagName === "HTML" ||
          target.offsetWidth === 0 ||
          target.offsetHeight === 0 ||
          target.disabled ||
          isSensitiveField(target)
        )
          return;

        //节流
        const now = Date.now();
        if (now - lastEventTime < 100) return;
        lastEventTime = now;

        const reportData = {
          type: "behavior",
          subType: "click",
          domPath: getElementPath(target),
          trackId: target.dataset.trackId,
          id: target.id,
          classList: [...target.classList],
          elementRect: target.getBoundingClientRect(),
          textContent: target.textContent.slice(0, 20),
          timestamp: Date.now(),
        };

        lazyReportBatch(reportData);
      },
      true
    );
  });
}


// import { lazyReportBatch } from "../report";

// // 初始化标识与节流控制
// let isInitialized = false;
// let lastEventTime = 0;

// // 生成元素指纹的哈希函数
// const generateElementHash = (el) => {
//   const rect = el.getBoundingClientRect();
//   const positionData = [
//     Math.round(rect.top),
//     Math.round(rect.left),
//     el.tagName,
//     el.textContent?.slice(0, 20) || ''
//   ].join('-');
  
//   // 简单哈希生成（可替换为更复杂算法）
//   return btoa(positionData).replace(/[^a-zA-Z0-9]/g, '').slice(0, 20);
// };

// // 动态添加追踪标识
// const ensureTrackId = (target) => {
//   if (!target.dataset.trackId && !target.dataset.autoTrackId) {
//     const autoId = generateElementHash(target);
//     target.dataset.autoTrackId = autoId;
//   }
//   return target.dataset.trackId || target.dataset.autoTrackId;
// };

// // DOM路径生成
// const getElementPath = (el) => {
//   const path = [];
//   while (el && el !== document.body) {
//     let selector = el.tagName.toLowerCase();
//     el.id && (selector += `#${el.id}`);
//     el.className && typeof el.className === "string" && 
//       (selector += `.${el.className.replace(/\s+/g, '.').replace(/[^a-zA-Z0-9-_\.]/g, '')}`);
//     path.unshift(selector);
//     el = el.parentElement;
//   }
//   return path.join(" > ");
// };

// // 敏感字段检测
// const isSensitiveField = (el) => {
//   return el.tagName === "INPUT" && el.type === "password";
// };

// // 初始化动态元素监听
// const initAutoTracker = () => {
//   // 监听所有新增元素
//   const observer = new MutationObserver(mutations => {
//     mutations.forEach(({ addedNodes }) => {
//       addedNodes.forEach(node => {
//         if (node.nodeType === 1) {
//           ensureTrackId(node);  // 自动添加标识
//         }
//       });
//     });
//   });

//   observer.observe(document.body, {
//     childList: true,
//     subtree: true
//   });

//   // 初始扫描现有元素
//   document.querySelectorAll('*').forEach(el => {
//     ensureTrackId(el);
//   });
// };

// export default function onClick() {
//   if (isInitialized) return;
//   isInitialized = true;

//   // 启动动态元素追踪
//   initAutoTracker();

//   // 事件监听逻辑
//   ["mousedown", "touchstart"].forEach((eventType) => {
//     window.addEventListener(
//       eventType,
//       (e) => {
//         const target = e.target;
//         if (
//           target.tagName === "BODY" ||
//           target.tagName === "HTML" ||
//           target.offsetWidth === 0 ||
//           target.offsetHeight === 0 ||
//           target.disabled ||
//           isSensitiveField(target)
//         ) return;

//         // 节流控制
//         const now = Date.now();
//         if (now - lastEventTime < 100) return;
//         lastEventTime = now;

//         // 确保存在追踪标识
//         const trackId = ensureTrackId(target);

//         const reportData = {
//           type: "behavior",
//           subType: "click",
//           trackId,  // 关键改进点：包含动态生成的ID
//           domPath: getElementPath(target),
//           id: target.id,
//           classList: [...target.classList],
//           elementRect: target.getBoundingClientRect().toJSON(),
//           textContent: target.textContent?.slice(0, 20) || '',
//           timestamp: Date.now(),
//         };

//         lazyReportBatch(reportData);
//       },
//       true
//     );
//   });
// }